<template>
    <div class="index">
        <el-container style="height: 100vh;">
            <el-scrollbar style="height:100%;width: 235px!important;">
                <el-aside width="235px" style="background-color: #fff">
                    <div class="aside_container">
                        <img src="../assets/Snipaste_2021-12-20_09-25-57.png" alt="">
                        <div class="menu_container">
                            <!--<el-scrollbar style="height:100%">-->
                            <el-menu style="width: 95%;" unique-opened
                                     active-text-color="#FFC52F">

                                <el-submenu index="1">
                                    <template slot="title"><i class="el-icon-money"></i>财务管理</template>
                                        <el-menu-item index="1-1">门诊科室工作量统计</el-menu-item>
                                        <el-menu-item index="1-2">门诊日结核对</el-menu-item>
                                        <el-menu-item index="1-3">费用科目管理</el-menu-item>

                                </el-submenu>

                                <el-submenu index="2">
                                    <template slot="title"><i class="el-icon-office-building"></i>挂号</template>
                                    <el-menu-item index="2-1">挂号</el-menu-item>
                                    <el-menu-item index="2-2">现场挂号</el-menu-item>
                                    <el-menu-item index="2-3">退号</el-menu-item>
                                </el-submenu>

                                <el-submenu index="3">
                                    <template slot="title"><i class="el-icon-user"></i>医生门诊</template>
                                    <el-menu-item index="3-1">成药处方</el-menu-item>
                                    <el-menu-item index="3-2">诊毕</el-menu-item>
                                    <el-menu-item index="3-3">患者费用明细</el-menu-item>
                                    <el-menu-item index="3-4">门诊病历</el-menu-item>
                                    <el-menu-item index="3-5">检查申请</el-menu-item>
                                    <el-menu-item index="3-6">门诊确认</el-menu-item>
                                </el-submenu>

                                <el-submenu index="4">
                                    <template slot="title"><i class="el-icon-orange"></i>门诊药房</template>
                                    <router-link to="/home/pharmacy/dispatch">
                                        <el-menu-item index="4-1">门诊发药</el-menu-item>
                                    </router-link>
                                    <router-link to="/home/pharmacy/withdrawal">
                                        <el-menu-item index="4-2">门诊退药</el-menu-item>
                                    </router-link>
                                    <router-link to="/home/pharmacy/manage">
                                        <el-menu-item index="4-3">药品目录管理</el-menu-item>
                                    </router-link>
                                </el-submenu>

                                <el-submenu index="5">
                                    <template slot="title"><i class="el-icon-data-analysis"></i>医技模块</template>
                                    <el-menu-item index="5-1">检查检验登记</el-menu-item>
                                    <el-menu-item index="5-2">检查检验结果录入</el-menu-item>
                                    <el-menu-item index="5-3">个人工作量登记</el-menu-item>
                                </el-submenu>
                            </el-menu>
                            <!--</el-scrollbar>-->
                        </div>
                    </div>
                </el-aside>
            </el-scrollbar>
            <el-container style="width: 70%">
                <router-view></router-view>
            </el-container>
        </el-container>
    </div>
</template>

<script>

// 引入css，推荐将css放入main入口中引入一次即可。


import {HappyScroll} from "vue-happy-scroll/src";

export default {
    name: "Index",
    data() {
        return {}
    },
    components: {HappyScroll}
}
</script>

<style scoped>

aside {
    position: relative;
    box-shadow: rgba(144, 142, 142, 0.13) 2px 0px 6px 0px;
}


.el-header {
    background-color: #F3F4F7;
    color: #333;
    line-height: 60px;
}

.el-main {
    background-color: #FFFFFF;
}


.el-menu {
    border-right: none !important;

}

.el-menu-item.is-active {
    background-color: #FFF6E2 !important;
}


.el-submenu__title:focus {
    background-color: #FFF6E2 !important;
}

.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}

.menu_container {
    width: 235px;
    height: 650px;

}

.aside_container {
    width: 235px;
    height: 100%;
}


.aside_container img {
    position: relative;
    width: 233px;
}


.aside_tool {
    width: 235px;
    height: 60px;
}
</style>


